<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        list-style: none;
      }
      ul {
        width: 800px;
        height: 300px;
        border: 10px solid red;
        text-align: center;
        display: flex;
        /* flex-direction: column; */
        justify-content: space-around;
        align-items: flex-start;
      }
      li {
        width: 100px;
        height: 100px;
        font-size: 50px;
        background-color: #bfa;
        /* flex-grow: 1; */
      }
      li:nth-child(2) {
        background-color: skyblue;
      }
    </style>
  </head>
  <body>
    <!-- 
      flex弹性盒
       *display: flex 块级元素弹性盒
        display: inline-flex 行内元素弹性盒， 盒子外的元素不会换行

        容器样式：
        flex-direction 子元素排列方向
          可选值
            row 横向 左->右                   主轴 自左向右   侧轴  自上向下          
            row-reverse 横向 右->左           主轴 与上相反   侧轴  与上相反
           *column 纵向 上->下                主轴 自上向下   侧轴  自左向右
            column-reverse 纵向 下->上        主轴 与上相反   侧轴  与上相反

        flex-wrap 子元素是否换行
          可选值
            nowrap  默认值，不换行
           *wrap    换行
            wrap-reverse  反转wrap排列
        
        flex-flow: wrap和direction的简写 无顺序要求
          flex-flow：wrap row;

        justify-content: 主轴上的元素如何排列
          可选值
            flex-start:      子元素从起始位置对齐
            flex-end:        ....结束位置对齐
            center           ....中间位置对齐
            *space-around    ....空白分布到子元素两侧 两端保留的空白是中间的一半
            (兼容性不好)space-evenly    ....空白分布到子元素单侧 两端保留的空白与中间的一样
            *space-between    ....空白分布到子元素中间 两端无空白

        align-items: 侧轴上的元素如何排列
          可选值
            stretch           默认值，当元素的高度未固定时，拉伸为父容器的高度
            flex-start        元素不会拉伸,沿侧轴开始位置对齐
           *center            沿侧轴居中
            baseline          基线对齐
        
        align-content：侧轴空间分布
          可选值
            与justify-content一样




        子元素样式：
          flex-grow 指定元素的伸展系数
            当父元素有多余的空间时，子元素如何伸展
            值越大，获得空间的比例越大

          flex-shrink 指定弹性元素的收缩系数
            当父元素的空间不足以容纳所有的子元素时，子元素如何收缩
            值越大，收缩的空间比例越大
          
          flex-basis 指定元素在主轴上的长度
            主轴横向，该值为宽度
            值周纵向，该值为高度
            默认值auto
          
          flex 设置元素的三个样式
            增长 缩减 基础

          order 改变子元素排列的顺序，数值小的排前面
     -->
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </body>
</html>
